<template>

  <div >
    <div class="header" :class="scrollClass0">
      <div class=" common-width layout"  >
        <div class="fl headerLeft" ref="headerLeft">
          <img src="../../static/image/logo.svg"/>
        </div>
        <div class="fr headerRight" ref="headerRight">
          <el-menu :default-active="activeIndex" :class="scrollClass1" background-color="rgba(0,0,0,.0)"
                   active-text-color="#ffd04b"  mode="horizontal" @select="handleSelect">
            <el-menu-item index="1"><a href="#/" @mouseenter="mouseLeave(1)">首页</a></el-menu-item>
            <el-menu-item index="2" ><a  @mouseenter="mouseEnter(2)" href="#/about/1">关于映湃</a></el-menu-item>
            <el-menu-item index="3"><a href="###"  @mouseenter="mouseEnter(3)"  >软件与技术服务</a></el-menu-item>
            <el-menu-item index="4"><a href="###"  @mouseenter="mouseEnter(4)"  >解决方案</a></el-menu-item>
            <el-menu-item index="5"><a href="#/news" @mouseenter="mouseLeave(5)">新闻动态</a></el-menu-item>
            <el-menu-item index="6"><a href="#/customer" @mouseenter="mouseLeave(6)">我们的客户</a></el-menu-item>
            <el-menu-item index="7"><a href="https://company.zhaopin.com/CZ805458470.htm" @mouseenter="mouseLeave(7)" target="_blank">加入我们</a></el-menu-item>
            <el-menu-item index="8"><a href="https://expect-x.net/en/index.jsp" target="_blank" @mouseenter="mouseLeave(8)">EN</a></el-menu-item>
          </el-menu>
        </div>
      </div>

    </div>
    <div v-if="isShow && this.activeIndex=='2'" @mouseenter="mouseEnter(2)" @mouseleave="mouseLeave(2)" style="position: fixed;" class="sub-menu about-sub-menu" :style="{left:submenuLeft+'px'}">
      <ul>
        <li>
          <a href="#/about/1">
            <div class="fl">
              <img :src="type==1
             ? ''
            :''"/>
            </div>
            <div class="fl" :style="{color:(type==1?'#379FD4':'#1A1E21')}">公司简介</div>
          </a>
        </li>
        <li>
          <a href="#/about/2">
            <div class="fl">
              <img :src="type==2
            ? ''
            :''"/>
            </div>
            <div class="fl" :style="{color:(type==2?'#379FD4':'#1A1E21')}">企业文化</div>
          </a>
        </li>
        <li>
          <a href="#/about/3">
            <div class="fl">
              <img :src="type==3
              ? ''
              :''"/>
            </div>
            <div class="fl" :style="{color:(type==3?'#379FD4':'#1A1E21')}">管理团队</div>
          </a>
        </li>
        <li>
          <a href="#/about/4
">
            <div class="fl">
              <img :src="type==4
              ? ''
              :''"/>
            </div>
            <div class="fl" :style="{color:(type==4?'#379FD4':'#1A1E21')}">联系我们</div>
          </a>
        </li>
      </ul>
    </div>
    <div v-if="isShow && this.activeIndex=='3'" @mouseenter="mouseEnter(3)" @mouseleave="mouseLeave(3)" style="position: fixed;" class="sub-menu solution-sub-menu services-sub-menu" :style="{left:submenuLeft+'px'}">
      <el-row>
        <el-col :span="12" v-for="item in services" :key="item.id">
          <div class="s-header-title">
            <div class="fl"><img :src="item.icon"></div>
            <div class="fl">{{item.name}}</div>
          </div>
          <el-divider class="s-header-hr"></el-divider>
          <ul>
            <li v-for="i in item.contentArticles">
              <a href="javascript:void(0)"  @click="technologyServiceDetail(i.id)">{{i.title}}</a>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <div v-if="isShow && this.activeIndex=='4'" @mouseenter="mouseEnter(4)" @mouseleave="mouseLeave(4)"  style="position: fixed;" class="sub-menu solution-sub-menu" :style="{right:submenuRight+'px'}">
      <el-row>
        <el-col :span="8" v-for="item in solution" :key="item.id">
          <div class="s-header-title">{{item.name}}</div>
          <el-divider class="s-header-hr"></el-divider>
          <ul>
            <li v-for="i in item.contentArticles">
              <a  href="javascript:void(0)" @click="lookDetail(i.id)">{{i.title}}</a>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="770px"
      :show-close="FALSE">
      <el-row>
        <el-col :span="10">
          <img style="height: 466px;border-radius: 28px 0px 0px 28px;" src="../../static/image/dialog.jpg">
        </el-col>
        <el-col :span="14">
          <div style="text-align: right"><i class="el-icon-close" @click="handleClose()"></i></div>
          <div style="font-size:24px;font-weight:500;color:rgba(51,51,51,1);">请您留言～</div>
          <el-form ref="form" :rules="rules" :model="form" label-width="0px" style="margin: 45px 50px 0px 0px">
            <el-form-item label=""prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名(必填)"></el-input>
            </el-form-item>
            <el-form-item label=""prop="phone">
              <el-input v-model="form.phone" placeholder="请输入电话(必填)"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-select v-model="form.industryType" placeholder="请选择行业类型">
                  <el-option-group
                    v-for="group in services"
                    :key="group.name"
                    :label="group.name">
                    <el-option
                      v-for="item in group.contentArticles"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </el-option>
                  </el-option-group>
                  <el-option-group
                    v-for="group in solution"
                    :key="group.name"
                    :label="group.name">
                    <el-option
                      v-for="item in group.contentArticles"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </el-option>
                  </el-option-group>

                </el-select>
<!--              <el-select v-model="form.region" placeholder="请选择行业类型">-->
<!--                <el-option label="区域一" value="shanghai"></el-option>-->
<!--                <el-option label="区域二" value="beijing"></el-option>-->
<!--              </el-select>-->
            </el-form-item>
            <el-form-item label="">
              <el-input type="textarea" v-model="form.description" placeholder="请简单描述"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"@click="createData"   style="border-radius: 24px;background-color: #379FD4;border-color: #379FD4;width: 130px">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>

      </el-row>
    </el-dialog>
  </div>





</template>

<script>
  let validateLinkPhone=(rule, value,callback)=>{
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
    if (!value){
      callback(new Error('联系电话'))
    }else  if (!reg.test(value)){
      callback(new Error('请输入正确的11位手机号码'))
    }else {
      callback()
    }
  }
  export default {
    name: 'Header',
    props: {
      active: {
        type: Number,
        default: 1,
        bodyWidth:0
      }

    },
    data () {
      return {
        FALSE:false,
        form:{},
        dialogVisible: false,
        isShow:false,
        type:1,
        activeIndex:this.active+"",
        scrollClass0:"header-opacity",
        scrollClass1:"header-opacity0",
        submenuLeft:0,
        submenuRight:0,
        services:[],
        aCheckedId:undefined,
        solution:[],

        options: [{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
        rules: {
          name: [{ required: true, message: '请填写姓名', trigger: 'change' }],
          phone: [{ required: true, message: '请填写手机号码', trigger: 'change' },{ validator: validateLinkPhone, trigger: 'blur' }]
        },
      }
    },
    created() {
      this.bodyWidth=document.body.clientWidth;
      this.type = this.$route.params && this.$route.params.type;
    },
    mounted (){
      window.addEventListener('mousewheel',this.handleScroll,false);
      let obj={
        bodyWidth:document.body.clientWidth,
        headerLeftWidth:this.$refs.headerLeft.clientWidth,
        headerRightWidth:this.$refs.headerRight.clientWidth
      }
      this.$emit('headerCallBack',obj);
      this.submenuLeft = (obj.bodyWidth - 1346) / 2 + obj.headerLeftWidth + (1346 - obj.headerLeftWidth - obj.headerRightWidth) + 26.5
      this.submenuRight = (obj.bodyWidth-obj.headerLeftWidth-obj.headerRightWidth)/2-(1260-obj.headerLeftWidth-obj.headerRightWidth)/2+20;
    },
    methods:{
      handleSelect(key, keyPath) {
      },
      handleScroll () {
        console.log(document.body.scrollTop+document.documentElement.scrollTop)
        if(document.body.scrollTop+document.documentElement.scrollTop<=70){

          this.scrollClass0="header-opacity";
          this.scrollClass1="header-opacity0";
        }else{
          this.scrollClass0="header-scroll";
          this.scrollClass1="header-scroll";
        }

      },
      mouseEnter(index){
        let _self = this;
        if (index==3){

          _self.$store.dispatch('technologyService', {}).then(response => {
            _self.services = response.data;
          }).catch(() => {
          })
        }
        if (index==4){
          _self.$store.dispatch('solution', {}).then(response => {
            _self.solution = response.data;
          }).catch(() => {
          })
        }
        this.activeIndex=index+"";
        this.isShow=true;
        console.log(index)
      },
      technologyServiceDetail(id){
        // window.open("#/services/" + id );
        window.location.href="#/services/" + id
        location.reload()
          // ,"_self"
      },
      lookDetail(id){
        window.open("#/solution/" + id ,'_self');
        location.reload()
        // window.location.href="#/solution/" + id

      },
      mouseLeave(e,index){
        let _self = this;
        _self.isShow=false;
        setTimeout(function () {
          //
        },5000)

        console.log(index)
      },
      showLinkUs(){
        console.log(111)
        this.dialogVisible=true;
        this.$store.dispatch('technologyService', {}).then(response => {
          this.services = response.data;
        }).catch(() => {
        })

        this.$store.dispatch('solution', {}).then(response => {
          this.solution = response.data;
        }).catch(() => {
        })
      },
      handleClose(done) {
       this.dialogVisible=false;
      },
      createData(){
        let _self=this;
        this.$refs['form'].validate((valid) => {

          if (valid) {
            _self.dialogFormVisible = false
            _self.$store.dispatch('createReauirement',_self.form).then(response => {
              if (response.code==200){

                this.$notify({
                  title: '发送成功',
                  message: '已收到您的留言,我们将尽快回复您',
                  type: 'success',
                  duration: 2000
                })
                this.dialogVisible=false;
                this.form={}
                this.handleFilter();

              }
            }).catch(() => {
              _self.listLoading = false
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .el-menu--horizontal>.el-menu-item:hover{
    background-color: rgba(0, 0, 0, 0) !important;
    color: #ffffff;
  }
  .header .el-menu-item{
    border-bottom-color:rgba(0, 0, 0, 0) !important;
    color: #ffffff !important;
  }


</style>
